<!--suppress ALL -->
<html xmlns:pdf="https://github.com/xhtml2pdf/xhtml2pdf/blob/master/doc/usage.rst">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <style>
        @page {
            size: a4 portrait;
            background-image: url('{{ base_dir }}/static/data/ticket-trans-notext.png');
            margin: 0;

            @frame col1_frame {             /* Content frame 1 */
                left: 80pt;  top: 30pt;
                height: 250pt; width: 300pt;
            }

            @frame qrcode {
                left: 455pt;  top: 50pt;
                width: 100pt; height: 120pt;
            }
            @frame number_frame {
                 left: 455pt;  top: 25pt;
                width: 100pt; height: 30pt;
                -pdf-frame-content: number_content;
            }


             @frame col2_frame {
                left: 440pt; top: 170pt;
            }
        }

        #qrcode {
            -pdf-frame-break: true;
        }

        .label {
            color: #858585;
        }

    </style>
</head>
<body>
</body>
</html>
        <div id="main_content">
            <span class="label">Event</span><br>
            <span style="font-size: 20px;">{{ order.event.name }}</span><br><br>

            <span class="label">Location</span><br>
            <span style="font-size: 15px;"> {{order.event.location_name }}</span><br><br>

            <span class="label">Date and Time</span><br>
            <span  style="font-size: 15px;">{{ order.event.starts_at.strftime('%H:%M %Z') }} to {{ order.event.ends_at.strftime('%H:%M %Z') }}</span>
            <br><br>

            <span class="label">Type</span><br>
            <span style="font-size: 20px;">{{ holder.ticket.name }}</span>
            <br><br>
        </div>

        <div id="qrcode">
            <img src="data:image/png;base64,{{ holder.qr_code }}" />
        </div>
        <strong id="number_content" style="color: #000; text-align: center">#{{ order.get_invoice_number() }}/{{ holder.id }}</strong>

        <div id="personal_content_{{ holder.id }}">
            <span>{{ holder.name }}</span><br>
            <span>{{ holder.email }}</span>
        </div>

    <pdf:nextpage />
